<template>
  <div id="app">
     <div class="row face_">
      <!-- 左边 -->
      <div class="left_img">
        <el-upload
          action="/pic/upload"
          list-type="picture-card"
          :on-remove="handleLeftRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <!-- 右边 -->
      <div class="right_img">
          <el-upload
            action="/pic/upload"
            list-type="picture-card"
            :on-remove="handleRightRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  mounted(){
      // http://120.79.54.154:8083/pic/upload
      // http://ip:8082/api/v1/face/imageCompareUrl
      this.compare();
    },
    data() {
      return {
        leftImg: 'https://cdn.faceplusplus.com.cn/mc-official/scripts/demoScript/images/demo-pic33.jpg',
        rightImg: 'https://cdn.faceplusplus.com.cn/mc-official/scripts/demoScript/images/demo-pic39.jpg',
      }
    },
    methods: {
      compare(){
        // 192.168.31.226
        fetch(`http://192.168.31.226:8082/api/v1/face/imageCompareUrl?filePath1=${this.leftImg}&filePath2=${this.rightImg}`,
          {
            method: 'GET',
            mode: 'cors',
            referrer: 'no-referrer',
            credentials: 'include',
            // body: JSON.stringify({
            //   filePath1: this.leftImg,
            //   filePath2: this.rightImg,
            // })
          }
          )
          // .then(res => console.log(res))
      },
      handleLeftRemove(){

      },
      handleRightRemove(){

      }
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
